<template>
<el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange" @current-change="handleCurrentChange">
</el-pagination>
</template>


<script>
export default {
    name: "CommonPagination",
    props: {
        total: {
            required: true,
            type: Number,
        },
        page: {
            type: Number,
            default: 1,
        },
        limit: {
            type: Number,
            default: 20,
        },
        pageSizes: {
            type: Array,
            default () {
                return [10, 15, 20, 30, 50];
            },
        },
        layout: {
            type: String,
            default: "total, sizes, prev, pager, next, jumper",
        },
        background: {
            type: Boolean,
            default: true,
        },
        hidden: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        currentPage: {
            get() {
                return this.page;
            },
            set(val) {
                this.$emit("update:page", val);
            },
        },
        pageSize: {
            get() {
                return this.limit;
            },
            set(val) {
                this.$emit("update:limit", val);
            },
        },
    },
    methods: {
        handleSizeChange(val) {
            this.$emit("getList");
        },
        handleCurrentChange(val) {
            this.$emit("getList");
        },
    },
};
</script>